{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="{{ FAVICON_URL }}" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ data.website_title }} | Login </title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="{{ data.website_description }}" name="description"/>
    <meta content="{{ data.website_author }}" name="author"/>
    <link href="{% static 'oracle/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'oracle/font-awesome/css/font-awesome.css' %}" rel="stylesheet">
    <link href="{% static 'oracle/css/animate/animate.css' %}" rel="stylesheet">
    <link href="{% static 'oracle/css/oracle.css' %}" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
    <div>
        <div>
            {% if "login_logo_name" in data and data.login_logo_name %}
                <h1 class="logo-name">{{ data.login_logo_name }}</h1>
            {% else %}
                <h1 class="logo-name">WT+</h1>
            {% endif %}
        </div>
        {% if "login_title" in data and data.login_title %}
            <h3>{{ data.login_title }}</h3>
        {% else %}
            <h3>欢迎访问瞭望塔！</h3>
        {% endif %}
        {% if "login_title" in data and "login_subtitle" in data and data.login_subtitle %}
            <p>{{ data.login_subtitle }}</p>
        {% else %}
            <p>WatchTower Online!</p>
        {% endif %}

        {% if form.errors %}
            <p style="color: red">
                {% if form.non_field_errors %}
                    {{ form.non_field_errors.as_text }}
                {% endif %}
            </p>
        {% else %}
            <p class="welcome-message">
                Welcome back, please enter username and password to login
            </p>
        {% endif %}
        <form class="m-t" role="form" method="post">
            {% csrf_token %}
            <div class="form-group">
                {{ form.username }}
            </div>
            <div class="form-group">
                {{ form.password }}
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">Login</button>
            {# TODO 忘记密码链接 #}
            <a href="#">
                <small>Forgot password?</small>
            </a>
            {# TODO 用户注册链接#}
            <p class="text-muted text-center">
                <small>Do not have an account?</small>
            </p>
            <a class="btn btn-sm btn-white btn-block" href="register.html">Create an account</a>
        </form>
        <p class="m-t">
            <small></small>
        </p>
    </div>
</div>
<!-- Mainly scripts -->
<script src="{% static 'oracle/js/jquery.min.js' %}"></script>
<script src="{% static 'oracle/js/popper.min.js' %}"></script>
<script src="{% static 'oracle/bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
